import {
    createRouter,
    createWebHistory,
    RouteLocationNormalized
} from 'vue-router'
import {
    h,
} from 'vue'
import store from '@/store'
import Mid from '@/views/Mid.vue'
import NProgress from 'nprogress'

// Vue2.X的base选项被移除，根路径在此处配置
const routerHistory = createWebHistory('/v3-plus')

const routes = [{
    path: '/',
    name: 'Layout',
    component: () =>
        import ('@/layout/index.vue'),
    children: [{
        path: '/',
        name: 'Home',
        meta: {
            title: '首页',
            icon: '&#xe801;',
            useCache: false
        },
        component: () =>
            import ('@/views/Home.vue')

    }, {
        path: '/Profile',
        name: 'Profile',
        meta: {
            title: '个人主页',
            icon: '&#xe7ce;',
            useCache: true
        },
        component: () =>
            import ('@/views/Profile.vue')

    }, {
        path: '/Test',
        name: 'Test',
        meta: {
            title: '测试页面',
            icon: '&#xe81d;',
            useCache: true
        },
        component: {
            name: 'Test',
            render: () => h(Mid)
        },
        children: [{
            path: '/TestTemp',
            name: 'TestTemp',
            meta: {
                title: '测试vue3特性',
                useCache: true
            },
            component: () =>
                import ('@/views/Test/TestTemp.vue')

        }, {
            path: '/TestTable',
            name: 'TestTable',
            meta: {
                title: '测试报表',
                useCache: true
            },
            component: () =>
                import ('@/views/Test/TestTable.vue')

        }]

    }, {
        path: '/Tool',
        name: 'Tool',
        meta: {
            title: '我的工具',
            icon: '&#xe7a3;',
            useCache: true
        },
        component: {
            name: 'Tool',
            render: () => h(Mid)
        },
        children: [{
            path: '/IconTool',
            name: 'IconTool',
            meta: {
                title: '图标工具',
                useCache: true
            },
            component: () =>
                import ('@/views/Tool/IconTool.vue')

        }, {
            path: '/ReqTool',
            name: 'ReqTool',
            meta: {
                title: '请求工具',
                useCache: true
            },
            component: () =>
                import ('@/views/Tool/ReqTool.vue')

        }, {
            path: '/ColorRelator',
            name: 'ColorRelator',
            meta: {
                title: '颜色生成器',
                useCache: false
            },
            component: () =>
                import ('@/views/Tool/ColorRelator.vue')

        }, {
            path: '/ImgTool',
            name: 'ImgTool',
            meta: {
                title: '图片工具',
                useCache: false
            },
            component: () =>
                import ('@/views/Tool/ImgTool.vue')

        }, {
            path: '/DecodeTool',
            name: 'DecodeTool',
            meta: {
                title: '编码解码工具',
                useCache: false
            },
            component: () =>
                import ('@/views/Tool/DecodeTool.vue')

        }, {
            path: '/DateTool',
            name: 'DateTool',
            meta: {
                title: '日期时间工具',
                useCache: false
            },
            component: () =>
                import ('@/views/Tool/DateTool.vue')

        }]
    }]
}, {
    path: '/Login',
    name: 'Login',
    meta: {
        title: '登录',
    },
    component: () =>
        import ('@/views/Login.vue')

}, {
    path: '/Error',
    name: 'Error',
    meta: {
        title: '404',
    },
    component: () =>
        import ('@/views/Error.vue')
}, {
    path: '/:pathMatch(.*)',
    redirect: '/Error',
}]
const router = createRouter({
    history: routerHistory,
    routes
})
router.beforeEach((to, from, next) => {
    NProgress.start()
    let tabs: RouteLocationNormalized[] = store.state.tabs || []
    let user = store.getters.user || {}
    if (localStorage.getItem('user') && (!user || !user.id)) {
        user = JSON.parse(localStorage.getItem('user')||'{}')
        store.commit('user/setUser', user)
    }
    // 不是跳转登录界面 并且 没有登录的
    if (to.path !== '/Login' && !user.id) {
        return next('/Login')
    }
    // 404页面以外才加入标签
    if (to.path !== '/Error') {
        const temp = tabs.find((item: RouteLocationNormalized) => item.fullPath === to.fullPath)
        if (!temp) {
            tabs.push(to)
        }
    }

    store.commit('setTabs', tabs)
    next()
})
router.afterEach(transition => {
    NProgress.done();
});
export default router